<div class="container" ng-app="vehiclesApp" >    
    <div class="row" >
        <div class="blockGray">
            <div class="blockInner">
                <!-- <input type="text" class="form-control" placeholder="control en el rootScope" ng-model="selRow">-->
                 <ng-view></ng-view>
            </div>
        </div>        
    </div>
    
     
   
    <!--  Definición de vistas parciales -->    
    <script type="text/ng-template" id="index.html">
        <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
        <progressbar class="progress-striped active" value="100" type="info" ng-show="loading"></progressbar>
            <div class="toolbar">
                <div class="col-md-7">
                    &nbsp;
                </div>
                <div class="col-md-5 ">
                    <div class="pull-right">
                        <div class="btn-toolbar" role="toolbar">
                            <div class="btn-group  btn-group-sm">
                                <button class="btn btn-default" ng-click="go('/index')"><span class="glyphicon glyphicon-home"></span> Inicio</button>
                                <button class="btn btn-default" ng-click="go('/edit/0')"><span class="glyphicon glyphicon-plus-sign"></span> Nuevo</button>
                                <button class="btn btn-default" ng-click="goEdit('/edit/'+vehicleId)"><span class="glyphicon glyphicon-edit"></span> Editar</button>
                                <button class="btn btn-default" ng-click="delete(vehicleId)"><span class="glyphicon glyphicon-remove"></span> Eliminar</button>
                                <button class="btn btn-default" ng-click="refresh()"><span class="glyphicon glyphicon-refresh"></span> Actualizar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
        <br>
        <ng-jqgrid vapi="grid.apicall" config="grid.config" api="grid.api" gridid="grdVehicles01" pagerid="pager01"></ng-jqgrid>
        <!-- <input type="text" class="form-control"  value=""> -->
        
    </script>
    <script type="text/ng-template" id="edit.html">
    <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
    <progressbar class="progress-striped active" value="100" type="info" ng-show="loading"></progressbar>
    <div class="toolbar">
        <div class="col-md-7">
            &nbsp;
        </div>
        <div class="col-md-5 ">
            <div class="pull-right">
                <div class="btn-toolbar" role="toolbar">
                    <div class="btn-group  btn-group-sm">
                        <a href="#!/index" class="btn btn-default" role="button"><span class="glyphicon glyphicon-home"></span> Inicio</a>
                        <button class="btn btn-default" ng-click="save()" ng-disabled="frmVehicle.$invalid"><span class="glyphicon glyphicon-floppy-save"></span> Guardar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div class="panel panel-default">
        <div class="panel-heading">Veh&iacute;culos</div>

        <div class="panel-body">
            <form  role="form" novalidate name="frmVehicle">
                <div class="row">
                    <div class="col-md-6">
                        <input type="hidden" class="form-control" ng-model="vehicle.id">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.name)">
                            <label for="name">Nombre</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="Nombre del vehículo" required ng-model="vehicle.name">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.economicNumber)">
                            <label for="economicNumber"># Económico</label>
                            <input type="text" class="form-control" id="economicNumber" name="economicNumber" placeholder="Número económico" required ng-model="vehicle.economic_number">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.volume)">
                            <label for="volume">Volúmen</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="volume" name="volume" placeholder="Volúmen" required ng-pattern="/^\s*-?(\d+(\.\d{1,2})?|\.\d{1,2})\s*$/" ng-model="vehicle.volume">                      
                                <span class="input-group-addon">000.00 ft<sup>3</sup></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.type)">
                            <label for="type">Tipo</label>
                            <select id="type" name="type" class="form-control" required ng-model="vehicle.type"
                                    ng-options="opt.id as opt.tipo for opt in vehicleTypes">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.capacity)">
                            <label for="capacity">Capacidad</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="capacity" name="capacity" placeholder="Capacidad" required ng-pattern="/^\s*-?(\d+(\.\d{1,2})?|\.\d{1,2})\s*$/" ng-model="vehicle.capacity">                      
                                <span class="input-group-addon">000.00 Kg</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.status)">
                            <label for="status">Estatus</label>
                            <select id="status" name="status" class="form-control" required ng-model="vehicle.status"
                                    ng-options="opt.id as opt.status for opt in vehicleStatus">
                            </select>                      
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.trademark)">
                            <label for="trademark">Marca</label>
                            <input type="text" class="form-control" id="trademark" name="trademark" placeholder="Marca" required ng-model="vehicle.trade_mark">                      
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="plate">Placas</label>
                            <input type="text" class="form-control" id="plate" name="plate" placeholder="Placas" required ng-model="vehicle.plate">                      
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.color)">
                            <label for="color">Color</label>
                            <input type="text" class="form-control" id="color" name="color" placeholder="Color" required ng-model="vehicle.color">                      
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.gps)">
                            <label for="gps">GPS</label>
                            <input type="text" class="form-control" id="gps" name="gps" placeholder="# Identificador de GPS" required ng-model="vehicle.gps">                      
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.model)">
                            <label for="model">Modelo</label>
                            <input type="text" class="form-control" id="model" name="model" placeholder="Modelo" required ng-model="vehicle.model">                      
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.width)">
                            <label for="width">Ancho</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="width" name="width" placeholder="Ancho del vehículo" required ng-pattern="/^\s*-?(\d{1,2}(\.\d{1,2})?|\.\d{1,2})\s*$/" ng-model="vehicle.width">
                                <span class="input-group-addon">00.00 m</span>
                            </div>                            
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.height)">
                            <label for="height">Altura</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="height" name="height" placeholder="Altura del vehículo" required ng-pattern="/^\s*-?(\d{1,2}(\.\d{1,2})?|\.\d{1,2})\s*$/" ng-model="vehicle.height">                      
                                <span class="input-group-addon">00.00 m</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmVehicle.deep)">
                            <label for="deep">Profundidad</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="deep" name="deep"  placeholder="Profundidad de caja" required ng-pattern="/^\s*-?(\d{1,2}(\.\d{1,2})?|\.\d{1,2})\s*$/" ng-model="vehicle.deep">                      
                                <span class="input-group-addon">00.00 m</span>
                            </div>
                        </div>
                    </div>
                </div>                

            </form>        
        </div>
    </div>
    </script>
    
    <script type="text/ng-template" id="modal.html">
        <!-- <div class="modal-header">
            <h3>{{modalOptions.headerText}}</h3>
        </div>-->
        <div class="modal-body">
            <br/>
            <p>{{modalOptions.bodyText}}</p>
            <br/>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" 
                    data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
            <button type="button" class="btn btn-primary" 
                    data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
        </div>
    </script>
    
    <script type="text/ng-template" id="modalInfo.html">
        <!--<div class="modal-header">
            <h3>{{modalOptions.headerText}}</h3>
        </div>-->
        <div class="modal-body">
            <br/>
            <p>{{modalOptions.bodyText}}</p>
            
        </div>
        <div class="modal-footer">           
            <button type="button" class="btn btn-primary" 
                    data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
        </div>
    </script>
    
</div>